<template>
  <div v-if="store.styleInfo" style="margin-bottom: 80px">
    <span ref="scrollIntoView"></span>
    <div class="swiper-box" v-if="store.styleInfo.banners">
      <div class="swiper-box-shadow">
        <div class="shadow-box"></div>
      </div>
      <!-- <t-swiper
        :current="current"
        :navigation="{ showSlideBtn: 'never', type: 'never' }"
        class="tdesign-demo-block--swiper"
        :autoplay="false"
        :duration="300"
        :interval="2000"
      >
        <t-swiper-item v-for="(item, index) in store.styleInfo.banners" :key="index">
          <div class="demo-item">
            <img
              :src="$filters.getLinkUrl(item.url + `?imageView2/1/w/${swiperWidth}/h/${swiperHeight}/format/webp`)"
              alt=""
            />
          </div>
        </t-swiper-item>
      </t-swiper> -->
      <swiper :bannerList="store.styleInfo.banners"></swiper>
    </div>

    <div v-for="(item, index) in typeList" :key="item.id" class="hw-unit-box" ref="hwUnitBox">
      <preface :info="item" v-if="item.type <= 6" :ModuleId="item.type" />
      <exhibit :info="item" :ModuleId="item.type" v-else-if="item.type <= 11 && item.type >= 6" />
      <Subunit :info="item" :ModuleId="item.type" :type="item.number" v-else />
    </div>
  </div>

  <NavVue @top="top" :flag="false"></NavVue>
</template>

<script setup lang="ts">
// @ts-nocheck

import { watch, ref, onMounted } from 'vue';
import { urls } from '@/utils/request/upload';
import Subunit from '../Subunit/index.vue';
import preface from '../preface/index.vue';
import exhibit from '../exhibits/index.vue';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';
import NavVue from './components/nav.vue';
import swiper from './components/swiper.vue';
const store = useProjectStore();
const typeList = ref([]);
typeList.value = store.styleInfo.moduleList;
const { styleInfo } = storeToRefs(store);
const current = ref(0);
const scrollIntoView = ref(null);
const hwUnitBox = ref(0);
const swiperWidth = ref(0);
const addCruuent = (e: number) => {
  if (e === 2) {
    if (current.value == store.styleInfo.banners.length - 1) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  } else {
    if (current.value == 0) {
      current.value = store.styleInfo.banners.length - 1;
    } else {
      current.value = current.value - 1;
    }
  }
};
onMounted(() => {
  for (let index = 0; index < hwUnitBox.value.length - 1; index++) {
    if ((index + 1) % 3 === 0) {
      if (store.styleInfo.auxiliaryColor === '#fff') {
        hwUnitBox.value[index].style.backgroundColor = '#F0E9E1';
      } else {
        hwUnitBox.value[index].style.backgroundColor = store.styleInfo.auxiliaryColor;
      }
    }
  }
});
watch(
  () => styleInfo,
  () => {
    typeList.value = store.styleInfo.moduleList;
    for (let index = 0; index < hwUnitBox.value.length - 1; index++) {
      if ((index + 1) % 3 === 0) {
        if (store.styleInfo.auxiliaryColor === '#fff') {
          hwUnitBox.value[index].style.backgroundColor = '#F0E9E1';
        } else {
          hwUnitBox.value[index].style.backgroundColor = store.styleInfo.auxiliaryColor;
        }
      }
    }
  },
  { deep: true },
);
watch(
  () => store.styleInfo.banners,
  () => {
    current.value = 0;
  },
  { deep: true },
);

const top = () => {
  scrollIntoView.value.scrollIntoView({ behavior: 'smooth' });
};
window.addEventListener('resize', () => {
  swiperWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  swiperHeight.value = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  console.log('屏幕宽度：' + swiperWidth.value);
  console.log('屏幕高度：' + swiperHeight.value);
});
</script>

<style lang="less" scoped>
.shadow-box {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}
.dot-item {
  width: 20px;
  height: 20px;
}

.dot-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.tdesign-demo-block--swiper {
  width: 100%;
  height: 100vh;
}
.demo-item {
  width: 100%;
  height: 100vh;

  img {
    width: 100%;
    height: 100vh;
  }
}
.hw-unit-box {
  width: 100%;
  min-width: 1180px;
  margin: 0 auto;
}
.quanjuIcon {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(calc(-50% + 634px), 0);
  > div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 20px;
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
    /deep/.iconfonts {
      font-size: 26px !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .t-icon {
      font-size: 30px !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
/deep/.star-box-pablish {
  right: 0 !important;
  top: 0 !important;
}
</style>
